<che-toolbar che-title="{{workspaceDetailsCtrl.workspaceDetails.config.name}}"
             che-title-icons-controller="workspaceDetailsCtrl"
             che-button-name="Open"
             che-button-href="#/ide/{{workspaceDetailsCtrl.workspaceDetails.namespace}}/{{workspaceDetailsCtrl.workspaceDetails.config.name}}"
             che-breadcrumb-title="All workspaces"
             che-breadcrumb-href="#/workspaces">
</che-toolbar>
<md-progress-linear md-mode="indeterminate" ng-show="workspaceDetailsCtrl.loading"></md-progress-linear>

<md-content md-scroll-y flex ng-if="workspaceDetailsCtrl.workspaceDetails">
  <md-tabs md-dynamic-height md-stretch-tabs="auto"
           md-selected="workspaceDetailsCtrl.selectedTabIndex"
           md-selected="selectedIndex" md-center-tabs="">
    <md-tab>
      <md-tab-label>
        <md-icon md-font-icon="material-design icon-ic_settings_24px" class="che-tab-label-icon"></md-icon>
        <span class="che-tab-label-title">Settings</span>
      </md-tab-label>
      <md-tab-body>
        <div class="workspace-details-content">

          <!-- Name -->
          <che-label-container che-label-name="Name">
            <div layout="column" class="workspace-details-input">
              <ng-form flex layout="column" name="workspaceInformationForm">
                <che-input che-form="workspaceInformationForm"
                           che-name="name"
                           che-place-holder="Name of the workspace"
                           ng-model="workspaceDetailsCtrl.newName"
                           ng-change="workspaceDetailsCtrl.updateWorkspace(workspaceInformationForm.$valid)"
                           required
                           unique-workspace-name="workspaceDetailsCtrl.workspaceDetails.config.name"
                           ng-maxlength="128"
                           ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
                  <div ng-message="required">A name is required.</div>
                  <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.
                  </div>
                  <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
                  <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
                  <div ng-message="uniqueWorkspaceName">This workspace name is already used.</div>
                </che-input>
              </ng-form>
            </div>
          </che-label-container>

          <!-- RAM -->
          <!--<che-label-container che-label-name="RAM">-->
            <!--<ng-form flex layout="column" name="workspaceInformationForm">-->
              <!--<che-workspace-ram-allocation-slider ng-model="workspaceDetailsCtrl.newRam"-->
                                                   <!--che-on-change="workspaceDetailsCtrl.updateWorkspace(workspaceInformationForm.$valid)"></che-workspace-ram-allocation-slider>-->
            <!--</ng-form>-->
            <!--<div class="workspace-details-restart-message" ng-if="workspaceDetailsCtrl.getWorkspaceStatus() !== 'STOPPED' && (workspaceDetailsCtrl.origRam !== workspaceDetailsCtrl.newRam)">Restart workspace to apply new value.</div>-->
          <!--</che-label-container>-->

          <!-- Status -->
          <che-label-container che-label-name="State">
            <div layout="column">
              <workspace-status che-status="workspaceDetailsCtrl.getWorkspaceStatus()"></workspace-status>
              <div flex class="workspace-details-description"
                   ng-show="(workspaceDetailsCtrl.errorMessage)">
                {{workspaceDetailsCtrl.errorMessage}}
              </div>
              <div layout="row" class="workspace-details-action-buttons">
                <div>
                  <che-button-default ng-disabled="(workspaceDetailsCtrl.getWorkspaceStatus() === 'STARTING')"
                                      ng-show="(workspaceDetailsCtrl.getWorkspaceStatus() !== 'RUNNING' && workspaceDetailsCtrl.getWorkspaceStatus() !== 'STOPPING')"
                                      che-button-title="Run" name="runButton"
                                      ng-click="workspaceDetailsCtrl.runWorkspace()"></che-button-default>
                  <che-button-default ng-disabled="(workspaceDetailsCtrl.getWorkspaceStatus() === 'STOPPING')"
                                      ng-show="(workspaceDetailsCtrl.getWorkspaceStatus() === 'RUNNING' || workspaceDetailsCtrl.getWorkspaceStatus() === 'STOPPING')"
                                      che-button-title="Stop" name="stopButton"
                                      ng-click="workspaceDetailsCtrl.stopWorkspace()"></che-button-default>
                </div>
                <div>
                  <che-button-primary-flat ng-disabled="(workspaceDetailsCtrl.getWorkspaceStatus() !== 'RUNNING')"
                                           che-button-title="Snapshot" name="snapshotButton"
                                           ng-click="workspaceDetailsCtrl.createSnapshotWorkspace()"></che-button-primary-flat>
                </div>
              </div>
            </div>
          </che-label-container>

          <!-- Export workspace -->
          <che-label-container che-label-name="Export workspace">
            <export-workspace workspace-id="{{workspaceDetailsCtrl.workspaceId}}"
                              workspace-details="workspaceDetailsCtrl.workspaceDetails"></export-workspace>
          </che-label-container>

          <!-- Delete workspace -->
          <che-label-container class="workspace-delete-label"
                               che-label-name="Delete workspace"
                               che-label-description="This is irreversible. Deleting your workspace will also delete its projects.">
            <che-button-danger che-button-title="Delete"
                               ng-disabled="!(workspaceDetailsCtrl.getWorkspaceStatus() === 'RUNNING' || workspaceDetailsCtrl.getWorkspaceStatus() === 'STOPPED' || workspaceDetailsCtrl.getWorkspaceStatus() === 'ERROR')"
                               ng-click="workspaceDetailsCtrl.deleteWorkspace($event)"></che-button-danger>
          </che-label-container>

        </div>
      </md-tab-body>
    </md-tab>
    <md-tab ng-repeat="section in workspaceDetailsCtrl.getSections()">
      <md-tab-label>
        <md-icon md-font-icon="material-design {{section.icon}}" class="che-tab-label-icon"></md-icon>
        <span class="che-tab-label-title">{{section.title}}</span>
      </md-tab-label>
      <md-tab-body>
        <div che-compile="section.content"></div>
      </md-tab-body>
    </md-tab>
  </md-tabs>
</md-content>

<md-content ng-show="workspaceDetailsCtrl.invalidWorkspace">
  {{workspaceDetailsCtrl.invalidWorkspace}}
</md-content>


